<template>
  <div>
    <!--  头部开始 -->
    <div style="height: 60px; background-color: #3c7fff; display: flex; align-items: center">
      <div style="width: 300px; display: flex; align-items: center; padding-left: 15px; white-space: nowrap;">
        <img style="width: 40px" src="@/assets/logo.png" alt="">
        <span style="font-size: 22px; color: white; margin-left: 8px">酒店管理系统后台</span>
      </div>
      <div style="flex: 1"></div>
      <div style="width: fit-content; display: flex; align-items: center; padding-right: 10px">
        <!-- 修改为使用可选链操作符 -->
        <img :src="data.user?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
          style="width: 40px; height: 40px; border-radius: 50%">
        <!-- 修改为使用可选链操作符 -->
        <span style="color: white; margin-left: 5px">{{ data.user?.name || '未登录用户' }}</span>
      </div>

<!--      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper" style="height: 60px; display: flex; align-items: center; padding: 0 10px; cursor: pointer;">
          <img :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
               class="user-avatar">
          <span style="color: white; margin-left: 5px">{{ data.user.name }}</span>
          <el-icon style="color: white; margin-left: 5px"><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/manager/person')">
              <el-icon><User /></el-icon>
              <span style="margin-left: 5px">个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item @click="$router.push('/manager/password')">
              <el-icon><Lock /></el-icon>
              <span style="margin-left: 5px">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click="logout">
              <el-icon><SwitchButton /></el-icon>
              <span style="margin-left: 5px">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>-->

    </div>
    <!--  头部结束 -->

    <!-- 下面部分开始 -->
    <div style="display: flex">
      <!-- 左侧导航菜单开始 -->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
          <el-menu-item index="/manager/home">
            <el-icon>
              <House />
            </el-icon>
            系统首页
          </el-menu-item>
          <el-menu-item index="/manager/data">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            数据统计
          </el-menu-item>

          <el-menu-item index="/manager/hotel">
            <el-icon><House /></el-icon>
            <span>酒店信息管理</span>
          </el-menu-item>
          <el-menu-item index="/manager/room">
            <el-icon><Box /></el-icon>
            <span>房间信息管理</span>
          </el-menu-item>
          <el-menu-item index="/manager/customer">
            <el-icon><User /></el-icon>
            <span>客户信息管理</span>
          </el-menu-item>
          <el-menu-item index="/manager/booking">
            <el-icon><Calendar /></el-icon>
            <span>预订信息管理</span>
          </el-menu-item>
          
          <el-menu-item index="/manager/person">
            <el-icon>
              <UserFilled />
            </el-icon>
            个人信息
          </el-menu-item>
          <el-menu-item index="/manager/password">
            <el-icon>
              <Lock />
            </el-icon>
            修改密码
          </el-menu-item>
          <el-menu-item @click="logout">
            <el-icon>
              <SwitchButton />
            </el-icon>
            退出登录
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 左侧导航菜单结束 -->

      <!-- 右侧主体区域开始 -->
      <div style="flex: 1; width: 0; background-color: #f5f7ff; padding: 10px">
        <RouterView @updateUser="updateUser" />
      </div>
      <!-- 右侧主体区域结束 -->
    </div>
    <!-- 下面部分结束 -->

  </div>
</template>

<script setup>
import { reactive } from "vue";
import router from "@/router/index.js";

// 添加空值检查，确保 data.user 初始化为一个空对象
const userData = localStorage.getItem('xm-pro-user');
const data = reactive({
  user: userData ? JSON.parse(userData) : {}
})

const logout = () => {
  localStorage.removeItem('xm-pro-user')  // 清除当前登录的用户缓存数据
  location.href = '/login'  // 退出到登录页面
}

const updateUser = () => {
  const userData = localStorage.getItem('xm-pro-user');
  data.user = userData ? JSON.parse(userData) : {}
}
</script>

<style>
.el-menu .is-active {
  background-color: #e6ecf7 !important;
}

.el-sub-menu__title {
  background-color: white !important;
}

.avatar-container {
  height: 60px;
  display: flex;
  align-items: center;
}

.avatar-container:focus {
  outline: none;
}

.avatar-wrapper {
  position: relative;
  transition: background-color 0.3s;
}

.avatar-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.el-dropdown-menu {
  padding: 0;
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  line-height: 1;
}

.el-dropdown-menu__item.is-divided {
  border-top: 1px solid #ebeef5;
  margin: 0;
}

.el-dropdown-menu__item:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

.el-dropdown-menu__item:hover .el-icon {
  color: #409EFF;
}

.el-dropdown-menu__item .el-icon {
  margin-right: 5px;
  font-size: 16px;
}
</style>